



 <div data-role="page" id="page1" data-theme="f">
    
    <script>
      $( "#page1" ).live( "pageinit", function( event ) { 
        $('#page1 a.nextbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; right: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 1px 0 0 rgba(255,255,255, 0.25), inset 1px 0 1px rgba(0,0,0, 0.2)"></div>');
        
        $('#page1 div[data-role="fieldcontain"] fieldset#s_g div div:first-child label span span').html('<img src="/images/glyphish-icons-png/111-user.png" width="18px" height="16px"></img>');
        $('#page1 div[data-role="fieldcontain"] fieldset#s_g div div:last-child label span span').html('<img src="/images/glyphish-icons-png/112-group.png" width="24px" height="16px"></img>');
       
        $('#page1 div[data-role="fieldcontain"] fieldset#m_f div div:first-child label span span').html('<img src="/images/male.png" width="25px" height="25px"></img>');
        $('#page1 div[data-role="fieldcontain"] fieldset#m_f div div:nth-last-child(2) label span span').html('<img src="/images/female.png" width="25px" height="25px"></img>');
        $('#page1 div[data-role="fieldcontain"] fieldset#m_f div div:last-child label span span').html('<img src="/images/couple.png" width="25px" height="25px"></img>');
       
       
       // separo i radio button nel controlgroup male_female
        $('#page1 div[data-role="fieldcontain"] fieldset#m_f div div:first-child').css('margin-right', '10px').css('border-radius', '10px').css('border-right', '1px solid #cccccc');
        $('#page1 div[data-role="fieldcontain"] fieldset#m_f div div:nth-last-child(2)').css('margin-right', '10px').css('border-radius', '10px').css('border-right', '1px solid #cccccc');
        $('#page1 div[data-role="fieldcontain"] fieldset#m_f div div:last-child').css('border-radius', '10px');
        
      });
      

      
    </script>

    <div data-role="header" data-theme="f">
        <h1>Nuovo Gift</h1> <!-- id=fer lo posso mettere sotto nella page 2 perche poi salto ad una pag esterna -->
        <a id="fer" href="page.gift_list.php" data-ajax="false" class="nextbutton ui-btn-right" >Next</a>
    </div><!-- /header -->

    <div data-role="content"> 
      
    <!--  a id="fer" href="#page2" --> <!--onclick="sessionStorage.ParameterID=123" -->
    <!--    Before go to next page, parameter id is storaged into sessionStorage.
    </a> -->
       
       
     <div data-role="fieldcontain" style="border-bottom: none; margin: 0px;">
          <fieldset id="m_f" data-role="controlgroup" data-type="horizontal">
            <legend>Regalo per:</legend>
              <input type="radio" name="radio_m_f" id="male_opt" value="male" checked="checked" />
              <label style="border-radius: 10px" for="male_opt"></label>
              <input type="radio" name="radio_m_f" id="female_opt"  value="female"  />
              <label style="border-radius: 10px" for="female_opt"></label>
              <input type="radio" name="radio_m_f" id="couple_opt"  value="couple"  />
              <label style="border-radius: 10px" for="couple_opt"></label>
          </fieldset>
       </div>
       
    
    <fieldset data-role="controlgroup">
        <legend>Profilo:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" data-mini="true">
        <label for="checkbox-v-2a">Sportivo</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" data-mini="true">
        <label for="checkbox-v-2b">Tecnologico</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" data-mini="true">
        <label for="checkbox-v-2c">Vanitoso</label>        
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2e" data-mini="true">
        <label for="checkbox-v-2e">Lettore</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2f" data-mini="true">
        <label for="checkbox-v-2f">Elegante</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2g" data-mini="true">
        <label for="checkbox-v-2g">Alla moda</label>
    </fieldset>

                   
       
       
       
       <div data-role="fieldcontain" style="border-bottom: none;">
          <fieldset id="s_g" data-role="controlgroup" data-type="horizontal">
            <legend>Singolo o di gruppo:</legend>
              <input type="radio" name="radio_s_g" id="single_opt" value="single" checked="checked" />
              <label for="single_opt"></label>
              <input type="radio" name="radio_s_g" id="group_opt"  value="group"  />
              <label for="group_opt"></label>
          </fieldset>
       </div>
       
      
       
       <div id="single_gift_option" style="margin-top: 10px">
      
       
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Budget:</legend>            
            <input type="radio" name="budget" id="budget-40e" value="40">
            <label for="budget-40e">40€</label>
            <input type="radio" name="budget" id="budget-50e" value="50">
            <label for="budget-50e">50€</label>
            <input type="radio" name="budget" id="budget-60e" value="60">
            <label for="budget-60e">60€</label>
            <input type="radio" name="budget" id="budget-70e" value="70">
            <label for="budget-70e">70€</label>
        </fieldset>
       
       </div>
       
       
       
       <div id="group_gift_option" style="display: none">
         <!-- la scelta del budget a persona avviene solo se Group gift -->
         <!-- <form> -->
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Budget a testa:</legend>            
            <input type="radio" name="budget" id="budget-10e" value="10">
            <label for="budget-10e">10€</label>
            <input type="radio" name="budget" id="budget-15e" value="15">
            <label for="budget-15e">15€</label>
            <input type="radio" name="budget" id="budget-20e" value="20">
            <label for="budget-20e">20€</label>
            <!-- <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="f" data-transition="pop">Altro</a> -->
            <input disabled="disabled" type="radio" name="budget" id="budget-altro" value="">            
            <label for="budget-altro">...</label> 
            
            
            <!-- <a style="visibility: hidden" href="#popupLogin" data-rel="popup" data-role="button" data-position-to="window"  data-theme="a" data-transition="pop"></a> -->            
          
          <div data-role="popup" id="popupMenu" data-theme="a">
    <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
        <!-- <form> -->
            <div style="padding:10px 20px;">
              <h3>Inserisci:</h3>
              <label for="budget-altro-popup" class="ui-hidden-accessible">Budget:</label>
              <input type="text" name="budget-altro-popup" id="" value="" placeholder="€" data-theme="f">              
              <button type="submit" name="submitAltroImporto" data-theme="b" data-icon="check">Ok</button>
            </div>
        <!-- </form> -->
    </div>
</div>
          
          </fieldset>
         <!-- </form> -->
       </div>
                   
                   
    <script>
      
      $('#budget-altro').click(function() {        
          $('#popupLogin').popup('open');
      });
      
      
      
      // al submit popup
      $('button[name=submitAltroImporto]').click(function() {  
        var newBudget =  $('input[name=budget-altro-popup]').val();      
        $("label[for='budget-altro'] span.ui-btn-text").text(newBudget + '€');
        $('input#budget-altro').val(newBudget);                
        $('#popupLogin').popup('close');
      });
      
    </script>  
             
      
       
      
    </div>  <!-- /content -->
    
    <div style="text-align: center"  data-role="footer" data-theme="c" >
      <ul style="list-style: none; padding: 0">
        <li>
         <a data-inline="true" href="" 
             style ="text-decoration: none; font-size: 13px; color: #999999 ">Giftshake © 2013</a>       
         
         <a data-inline="true" href="" 
             style ="text-decoration: none; padding-left: 20px; font-size: 13px; color: #999999" >Guida
         </a>
        </li>
     </ul>
   </div>
    
  </div>